<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import nothing from './nothing.vue'
import fruitCard from './fruitCard.vue'

// 定义水果对象的类型
export interface Fruit {
  id: number
  icon: string
  isChecked: boolean
  num: number
  price: number
}


// 重置数据
let reData = () => {
  fruitList.value = [
  {
    id: 1,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/ll.png',
    isChecked: true,
    num: 2,
    price: 6,
  },
  {
    id: 2,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/smt.png',
    isChecked: false,
    num: 7,
    price: 20,
  },
  {
    id: 3,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/tg.png',
    isChecked: false,
    num: 3,
    price: 40,
  },
  {
    id: 4,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/xg.png',
    isChecked: false,
    num: 10,
    price: 3,
  },
  {
    id: 5,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/yl.png',
    isChecked: false,
    num: 20,
    price: 34,
  },
]
  return fruitList.value
}

// 水果列表
const fruitList = ref<Fruit[]>([]) 

fruitList.value = localStorage.getItem('fruitList') === null ? reData() : JSON.parse(localStorage.getItem('fruitList')!) as Fruit[]


//是否空车
const isEmpty = ref(false)

watch(fruitList,() => {
  console.log(fruitList.value);
  if(fruitList.value.length === 0){
    isEmpty.value = true
  }else {
    isEmpty.value = false
  }
  localStorage.setItem('fruitList',JSON.stringify(fruitList.value))
},{deep:true,immediate:true})

//删除商品
const delGoods = (id:number) => {
  //删除商品
  fruitList.value = fruitList.value.filter(item => item.id !== id).slice()
}

//添加shanp
const addGoods = (id:number) => {
  fruitList.value[fruitList.value.findIndex(item => item.id === id)].num++
}
//减少商品
const reduceGoods = (id:number) => {
  fruitList.value[fruitList.value.findIndex(item => item.id === id)].num--
}
//计算总价
const totalPrice = computed(() => {
  return fruitList.value.reduce((acc, cur) => {
    return acc + cur.price * cur.num * (cur.isChecked ? 1 : 0)
  }, 0)
})
//计算商品数量
const totalNum = computed(() => {
  return fruitList.value.reduce((acc, cur) => {
    return acc + cur.num * (cur.isChecked ? 1 : 0)
  }, 0)
})
//全选
const checkAll = computed({
  get(){
    return fruitList.value.every(item => item.isChecked)
  },set(value){
    fruitList.value.forEach(item => {
      item.isChecked = value
    })
  }
})
//结算
const pay = () => {
  alert('结算失败🤡🤡🤡')
}


</script>

<template>
  <div class="app-container" id="app">
    <!-- 顶部banner -->
    <div class="banner-box"><img src="https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/sg_top.png" alt="" /></div>
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <span>🏠</span>
      /
      <span>购物车 &nbsp;&nbsp;&nbsp;</span>
      <button @click="reData">重置数据</button>
    </div>
    <!-- 购物车主体 -->
    <div v-if="!isEmpty" class="main">
      <div class="table">
        <!-- 头部 -->
        <div class="thead">
          <div class="tr">
            <div class="th">选中</div>
            <div class="th th-pic">图片</div>
            <div class="th">单价</div>
            <div class="th num-th">个数</div>
            <div class="th">小计</div>
            <div class="th">操作</div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="tbody">

          <!-- <div v-for="(item,index) in fruitList" class="tr active">
            <div class="td"><input type="checkbox" v-model="item.isChecked" /></div>
            <div class="td"><img :src="item.icon" alt="" /></div>
            <div class="td">{{ item.price }}</div>
            <div class="td">
              <div class="my-input-number">
                <button :disabled="item.num <= 1" class="decrease" @click="reduceGoods(item.id)"> - </button>
                <span class="my-input__inner">{{ item.num }}</span>
                <button class="increase" @click="addGoods(item.id)"> + </button>
              </div>
            </div>
            <div class="td">{{ item.num*item.price }}</div>
            <div class="td" v-on:click="delGoods(item.id)"><button>删除</button></div>
          </div> -->

          <div v-for="(item,index) in fruitList">
            <fruitCard 
            :item="item" 
            @add-goods="addGoods($event)" 
            @reduce-goods="reduceGoods($event)"
            @delete-goods="delGoods($event)"
            ></fruitCard>
          </div>

        </div>
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <!-- 全选 -->
        <label class="check-all">
          <input type="checkbox" v-model="checkAll"/>
          全选
        </label>
        <div class="right-box">
          <!-- 所有商品总价 -->
          <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{totalPrice}}</span></span>
          <!-- 结算按钮 -->
          <button class="pay" @click="pay">结算( {{totalNum}} )</button>
        </div>
      </div>
    </div>
    <!-- 空车 -->
    <div v-if="isEmpty"><nothing :msg="'空空如也~'"></nothing></div>
  </div>
</template>

<style scoped>
@import '../../style/inputnumber.css';
@import '../../style/index.css';
</style>